import {
  ObjectOnlyPushSet,
  removeObjectOnlyPushSet,
} from '../../../global/Func/ObjectOnlyPushSet_operate';

const listenCssVar_manaTag = 'listenCssVar_mana';

/**
 * 管理 当前元素 的 cssvar
 * @param {HTMLElement} element
 */
export class listenCssVar_mana {
  get [Symbol.toStringTag]() {
    return listenCssVar_manaTag;
  }

  constructor(element: HTMLElement) {
    this.targetEl = element;
  }

  [_: string]: Function | HTMLElement | string[] | string;

  /**
   * 目标元素
   */
  targetEl: HTMLElement;

  data: string[] = [];

  /**
   * 设定 cssvar
   * @param cssVar cssvar 变量名
   * @param val 值
   */
  setCssVar(cssVar: string, val: string) {
    if (!onlyCssVar(cssVar)) {
      return;
    }

    if (!ObjectOnlyPushSet(this, cssVar, val)) {
      this[cssVar] = val;
    }

    assembleStyle(this);
  }

  /**
   * 获取 cssvar 当前 值
   * @param cssVar
   */
  getCssVar(cssVar: string) {
    if (this.data.indexOf(cssVar) > -1) {
      //   console.log(`${cssVar}: ${a[cssVar]}`);
      return this[cssVar];
    }
  }

  /**
   * 移除 cssvar 变量 信息
   * @param cssVar
   */
  removeCssVar(cssVar: string) {
    removeObjectOnlyPushSet(this, cssVar);
    this.targetEl.style = ignoreCssVar(this.targetEl, cssVar);
  }
}

/**
 * 装载 热更新 信息
 */
function assembleStyle(that: listenCssVar_mana) {
  let styleStr = '';
  // a 中信息 为 热样式
  for (let i = 0; i < that.data.length; i++) {
    if (that[that.data[i]] != undefined) {
      styleStr += `${that.data[i]}: ${that[that.data[i]]};`;
    }
  }
  /**
   * 原始样式 冷样式
   */
  styleStr += asyncInlineStyle(that.targetEl, that.data);
  // console.log(styleStr);
  that.targetEl.style = styleStr;
}

/**
 * 解析 当前 元素的 内嵌样式  卸载元素标签上的 style
 * @param  element 当前元素
 * @param  data
 */
function asyncInlineStyle(element: HTMLElement, data: string[]) {
  return ignoreCssVar(element, data);
}

/**
 * @param  element
 * @param  CssVarArr -- 开头的 cssVar  css 变量
 */
function ignoreCssVar(element: HTMLElement, CssVarArr: string | string[]) {
  let stackcss = element.style.cssText;

  if (typeof CssVarArr == 'string') {
    CssVarArr = [CssVarArr];
  }
  // console.log(stackcss);

  let stackArr;
  // let val;
  for (let i = 0; i < element.style.length; i++) {
    if (onlyCssVar(element.style[i])) {
      // 删除 相关
      if (CssVarArr.includes(element.style[i])) {
        let matchStr = stackcss.match(regXcssVarValue(element.style[i]))!;
        //   console.log(matchStr, regXcssVarValue(element.style[i]));
        stackArr = stackcss.split('');
        stackArr.splice(matchStr.index || 0, matchStr[0].length);
        stackcss = stackArr.join('');

        //   console.log(stackcss);
      }
    }
  }
  return stackcss;
}

function onlyCssVar(prop: string) {
  // console.log('看看用到我 检测没');
  if (prop[0] == '-' && prop[1] == '-') {
    return true;
  }
  return false;
}

/**
 * 监听 目标元素的 css var 变量
 */
function regXcssVarValue(prifix: string) {
  return RegExp(`${prifix}: (?<cssvarValue>.*?);`);
}
